<template>
    <BaseReport
        :watermark-visible="data.watermarkVisible"
        :go-top-visible="data.goTopVisible"
        :bottom-fn-visible="data.bottomFnVisible"
        :is-share="data.isShare"
        :from-case="data.fromCase"
        :report-type="data.reportType"
        :baseInfo="data.baseInfo"
        :vin-parse-id="data.vinParseId"
        :status="data.reportQueryFail"
        :reportExpire="data.reportExpire"
        :report-load="data.reportLoad"
        @createDownloadReport="data.startDownload"
        @go-top="data.goTop"
        @hide-download="data.hideDownload"
    >
        <template #body>
            <!-- 顶部tab -->
            <Transition name="topfade" mode="out-in" appear>
                <section class="tab" v-if="data.tabVisible">
                    <Tab :list="data.tab" :select-index="data.selectTabIndex" @change="data.onSelectTab" />
                </section>
            </Transition>

            <section :class="['report-container', data.tabVisible ? 'tabActive' : '']">
                <section>
                    <section
                        :class="['block', item.blockClassName]"
                        v-for="(item, index) in data.columnArray"
                        :key="item.name"
                    >
                        <h1 @click="data.toggle(index)">
                            <span>{{ item.name }}</span>
                            <!-- 展开icon -->
                            <span
                                :class="['iconfont', item.spread ? 'icon-RectangleCopy8' : 'icon-RectangleCopy5']"
                                v-if="item.icon"
                            ></span>
                            <!-- 异常项 -->
                            <span v-if="item.abnormal" :class="[item.abnormalCount > 0 ? 'active' : '']">
                                <i>{{ item.abnormalCount }}</i> 项异常
                            </span>
                            <!-- 文本提示 -->
                            <span v-if="item.hint !== ''">{{ item.hint }}</span>
                        </h1>
                        <section :class="['document', item.bodyClassName]" v-show="item.spread">
                            <!-- 基础信息 -->
                            <template v-if="index === 0">
                                <Information :keys="REPORT_CONFIG_INFO" :data="data.basicInformation"></Information>
                            </template>
                            <!-- 配置信息 -->
                            <template v-else-if="index === 1">
                                <!-- (1.绿牌；2.蓝牌；3.其他) -->
                                <template v-if="Number(data.bodyColor) === 1">
                                    <Information
                                        :keys="REPORT_CONFIG_INFO"
                                        :data="data.configureInformationNEV"
                                    ></Information>
                                </template>
                                <template v-else>
                                    <Information
                                        :keys="REPORT_CONFIG_INFO"
                                        :data="data.configureInformation"
                                    ></Information>
                                </template>
                            </template>
                            <!-- 风险提示 -->
                            <template v-else-if="index === 2">
                                <section class="fxts-type">
                                    <Mesh :list="data.fxtsList" @touch="data.onClick"></Mesh>
                                </section>
                            </template>
                            <!-- 外观展示 -->
                            <template v-else-if="index === 3">
                                <section class="point-box">
                                    <span
                                        :class="[
                                            'point-item',
                                            'iconfont',
                                            item.checked ? 'abnormal' : '',
                                            item.avtive ? 'active' : ''
                                        ]"
                                        v-for="(item, index) in data.pointList"
                                        :key="item.type"
                                        @click="data.onClickApprearancePoint(index)"
                                    >
                                        {{ item.text }}
                                        <template v-if="item.avtive">
                                            <img
                                                src="../../../assets/images/icon_abnormal_active.png"
                                                alt=""
                                                srcset=""
                                            />
                                        </template>
                                        <template v-else>
                                            <img src="../../../assets/images/icon_abnormal.png" alt="" srcset="" />
                                        </template>
                                    </span>
                                </section>
                                <section class="car">
                                    <section class="car-model">
                                        <img src="../../../assets/images/icon_qc@3x.png" alt="" />
                                        <template v-for="(item, index) in data.pointList" :key="item.type">
                                            <span
                                                :class="[item.type, item.avtive ? 'active' : '']"
                                                v-show="item.avtive"
                                                >{{ item.text }}</span
                                            >
                                        </template>
                                    </section>
                                </section>
                            </template>
                            <!-- 骨架加强件检查 -->
                            <template v-else-if="index === 4">
                                <section class="gj">
                                    <img :src="data.skeletonImageUrl" alt="" />
                                </section>
                            </template>
                            <!-- 明细检查 -->
                            <template v-else-if="index === 5">
                                <CheckInfoVue
                                    :keys="REPORT_DETAILED_CHECK"
                                    :data="data.detailedCheck"
                                    :download="data.insuranceDownload"
                                ></CheckInfoVue>
                            </template>
                            <!-- 保险信息 -->
                            <template v-else-if="index === 6">
                                <Information
                                    :keys="INSURANCE_INFORMATION"
                                    :data="data.insuranceInformation"
                                ></Information>
                            </template>
                            <!-- 保险事故 -->
                            <template v-else-if="index === 7">
                                <section v-show="data.insuranceRecorded.length">
                                    <section class="insurance-statistics">
                                        <section
                                            class="statistic-item"
                                            v-for="item in data.insuranceStatistics"
                                            :key="item.label"
                                            @click="data.onSkipAnchor(item.anchor)"
                                        >
                                            <p>{{ item.label }}</p>
                                            <span>{{ item.value }}</span>
                                        </section>
                                    </section>
                                    <!-- 折线图 -->
                                    <section
                                        class="insurance-container"
                                        @click="data.onVisibleLineChartDialog('show')"
                                    ></section>
                                    <!-- 保险记录列表 -->
                                    <section class="insurance-record">
                                        <InsuranceModul
                                            :data="data.insuranceRecorded"
                                            :download="data.insuranceDownload"
                                        ></InsuranceModul>
                                    </section>
                                </section>
                                <section v-show="!data.insuranceRecorded.length">
                                    <section class="normal">
                                        <img src="../../../assets//images//finish.png" alt="" />
                                        <p>暂无任何保险事故</p>
                                    </section>
                                </section>
                            </template>
                        </section>
                    </section>

                    <!-- 该车车况异常项 -->
                    <section
                        v-if="false"
                        :class="[
                            'block',
                            'abnormalReinforcer',
                            data.abnormal.appearance.length ||
                            data.abnormal.reinforcer.length ||
                            data.abnormal.detailedCheck.length
                                ? 'active'
                                : ''
                        ]"
                    >
                        <h1>
                            <span>该车车况异常项</span>
                            <span></span>
                        </h1>
                        <section class="document abnormal">
                            <template
                                v-if="
                                    data.abnormal.appearance.length ||
                                    data.abnormal.reinforcer.length ||
                                    data.abnormal.detailedCheck.length
                                "
                            >
                                <section class="appearance" v-if="data.abnormal.appearance.length">
                                    <section class="title">外观检查{{ data.abnormal.appearance.length }}项</section>
                                    <section class="content" @click="data.onSkipAnchor('.appearance-container')">
                                        <section class="item" v-for="item in data.abnormal.appearance" :key="item">
                                            {{ item }}
                                        </section>
                                    </section>
                                </section>
                                <section class="reinforcer" v-if="data.abnormal.reinforcer.length">
                                    <section class="title">加强件检查{{ data.abnormal.reinforcer.length }}项</section>
                                    <section class="content" @click="data.onSkipAnchor('.detailedCheck-container')">
                                        <section class="item" v-for="item in data.abnormal.reinforcer" :key="item">
                                            {{ item }}
                                        </section>
                                    </section>
                                </section>
                                <section class="reinforcer" v-if="data.abnormal.detailedCheck.length">
                                    <section class="title">明细检查{{ data.abnormal.detailedCheck.length }}项</section>
                                    <section class="content" @click="data.onSkipAnchor('.detailedCheck-container')">
                                        <section class="item" v-for="item in data.abnormal.detailedCheck" :key="item">
                                            {{ item }}
                                        </section>
                                    </section>
                                </section>
                            </template>
                            <template v-else>
                                <section class="normal">
                                    <img src="../../../assets//images//finish.png" alt="" />
                                    <p>暂无任何异常</p>
                                </section>
                            </template>
                        </section>
                    </section>
                </section>
            </section>
            <!-- 折线图弹窗 -->
            <Explain
                :visible="data.lineChartDialog.visible"
                title="统计信息"
                @hide="data.onVisibleLineChartDialog('hide')"
            >
                <template #content>
                    <section class="lineChartDialog">
                        <!-- 折线图 -->
                        <section class="line-chart"></section>
                        <!-- 详细信息 -->
                        <section class="detailed">
                            <section class="li" v-for="item in data.lineChartDialog.list" :key="item.label">
                                <span>{{ item.label }}</span>
                                <span>{{ item.value }}</span>
                            </section>
                        </section>
                    </section>
                </template>
            </Explain>
        </template>
    </BaseReport>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import Mesh from '../base/Mesh.vue'
import Information from '../base/Information.vue'
import { ReportDetailed } from '.'
import { REPORT_CONFIG_INFO, REPORT_DETAILED_CHECK, INSURANCE_INFORMATION } from '@/utils/config'
import InsuranceModul from '../base/InsuranceModul.vue'
import CheckInfoVue from '../base/CheckInfo.vue'
import BaseReport from '../base/Index.vue'
import Explain from '../base/Explain.vue'

const data = reactive(new ReportDetailed())
</script>

<style scoped lang="scss">
.lineChartDialog {
    .line-chart {
        min-height: 15rem;
    }
    .detailed {
        box-sizing: border-box;
        padding: 0 var(--cxl-size-6);
        .li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: var(--cxl-size-15);
            color: var(--cxl-color-999999);
            margin-top: var(--cxl-size-10);
        }
    }
}

.tab {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}

.insurance-container {
    width: 100%;
}

.insurance-statistics {
    display: flex;
    flex-wrap: wrap;
    background-color: var(--cxl-color-f5f5f5);
    box-sizing: border-box;
    padding: 0 var(--cxl-size-10);
    .statistic-item {
        width: 33.33%;
        text-align: center;
        margin: var(--cxl-size-15) 0;
        span {
            font-weight: 600;
            font-size: var(--cxl-size-20);
            margin-bottom: var(--cxl-size-8);
        }
        p {
            display: block;
            width: 100%;
            font-size: var(--cxl-size-14);
            margin-bottom: var(--cxl-size-8);
        }
    }
}
.gj img {
    display: block;
    width: 100%;
}
.block {
    box-sizing: border-box;
    padding: var(--cxl-size-12);
    background-color: var(--cxl-color-white);
    border-radius: var(--cxl-size-6);
    margin-top: var(--cxl-size-10);
    &.abnormalReinforcer {
        &.active {
            background-color: var(--cxl-color-fff2f2);
        }
    }
    &.abnormalHint {
        &.active {
            i {
                color: var(--cxl-color-error);
            }
        }
    }

    h1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--cxl-size-16);
        font-weight: 600;
        i {
            font-size: var(--cxl-size-14);
        }
        &.hint {
            i {
                font-weight: 400;
                color: var(--cxl-color-999999);
            }
        }
        span:nth-child(2) {
            font-weight: normal;
            font-size: var(--cxl-size-14);
            color: var(--cxl-color-999999);

            &.active {
                color: var(--cxl-color-error);
                i {
                    color: var(--cxl-color-error);
                }
            }
            &.iconfont {
                font-size: var(--cxl-size-22);
            }
        }
    }
    .document {
        margin-top: var(--cxl-size-16);

        padding-top: var(--cxl-size-16);
        border-top: 1px solid var(--cxl-color-f0f0f0);
    }
}
.abnormal {
    .appearance,
    .reinforcer {
        margin-bottom: var(--cxl-size-16);
    }
    > section {
        width: 100%;
        .title {
            width: 100%;
            box-sizing: border-box;
            font-size: var(--cxl-size-14);
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            .item {
                font-size: var(--cxl-size-14);
                height: var(--cxl-size-24);
                background-color: var(--cxl-color-ff5448);
                color: var(--cxl-color-white);
                padding: 0 var(--cxl-size-10);
                margin: var(--cxl-size-10) var(--cxl-size-10) 0 0;
                border-radius: var(--cxl-size-12);
                display: flex;
                text-align: center;
                line-height: var(--cxl-size-24);
            }
        }
    }
}
.normal {
    text-align: center;
    align-items: center;
    justify-content: center;
    img {
        display: block;
        margin: auto;
        width: calc(var(--cxl-size-30) + var(--cxl-size-30));
    }
    p {
        display: block;
        width: 100%;
        font-size: var(--cxl-size-14);
        color: var(--cxl-color-999999);
        margin-top: var(--cxl-size-14);
    }
}
.fxts {
    .icon-hint {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--cxl-size-13);
        .icon-box {
            display: flex;
            align-items: center;
            span {
                display: flex;
                align-items: center;
                margin-right: var(--cxl-size-20);
            }
            img {
                display: block;
                height: 1rem;
                width: 1rem;
                margin-right: var(--cxl-size-6);
            }
        }

        p {
            color: var(--cxl-color-999999);
        }
    }
    .fxts-type {
        margin-top: var(--cxl-size-12);
    }
}

.wgzs {
    display: flex;
    padding: var(--cxl-size-16) 0;
    .point-box {
        width: calc(var(--cxl-size-40) * 2);
        span {
            display: block;
            box-sizing: border-box;
            width: 100%;
            height: var(--cxl-size-40);
            border-radius: var(--cxl-size-20);
            border: 1px solid var(--cxl-color-999999);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--cxl-size-15);
            margin-bottom: var(--cxl-size-10);
            position: relative;
            transition: all 0.35s;
            img {
                display: none;
                width: var(--cxl-size-24);
                height: var(--cxl-size-24);
                position: absolute;
                top: calc(0% - var(--cxl-size-10));
                right: calc(0% - var(--cxl-size-12));
            }
            &.abnormal {
                border-color: var(--cxl-color-ff5448);
                background-color: var(--cxl-color-fff2f2);
                img {
                    display: block;
                }
            }
            &.active {
                color: var(--cxl-color-white);
                background-color: var(--cxl-color-error);
            }
        }
    }
    .car {
        width: calc(100% - var(--cxl-size-40) * 2);
        display: flex;
        align-items: center;
        justify-content: center;

        .car-model {
            position: relative;
            width: 75%;
            img {
                display: block;
                width: 100%;
                height: auto;
                position: relative;
                z-index: 3;
            }
            span {
                display: block;
                height: var(--cxl-size-30);
                width: var(--cxl-size-30);
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                background-color: var(--cxl-color-ff5448);
                color: var(--cxl-color-white);
                font-size: var(--cxl-size-13);
                border-radius: 50%;
                z-index: 52;
                transition: all 0.35s;
                &.active {
                    // transform: scale(1.2);
                    // animation: scale 0.5s;
                }
                &.f {
                    top: calc(0% - var(--cxl-size-30) / 2);
                    left: calc(50% - var(--cxl-size-30) / 2);
                }
                &.rf {
                    top: calc(0% + var(--cxl-size-30) / 2);
                    right: calc(0% + var(--cxl-size-30) / 4);
                }
                &.rc {
                    top: calc(50% - var(--cxl-size-30) / 2);
                    right: calc(0% - var(--cxl-size-30) / 4);
                }
                &.rb {
                    bottom: calc(0% + var(--cxl-size-30) / 2);
                    right: calc(0% + var(--cxl-size-30) / 4);
                }
                &.b {
                    bottom: calc(0% - var(--cxl-size-30) / 2);
                    left: calc(50% - var(--cxl-size-30) / 2);
                }
                &.lb {
                    bottom: calc(0% + var(--cxl-size-30) / 2);
                    left: calc(0% + var(--cxl-size-30) / 4);
                }
                &.lc {
                    top: calc(50% - var(--cxl-size-30) / 2);
                    left: calc(0% - var(--cxl-size-30) / 4);
                }
                &.lf {
                    top: calc(0% + var(--cxl-size-30) / 2);
                    left: calc(0% + var(--cxl-size-30) / 4);
                }
                &.top {
                    top: calc(50% + var(--cxl-size-30) / 4);
                    left: calc(50% - var(--cxl-size-30) / 2);
                }
                &.bottom {
                    top: calc(50% + var(--cxl-size-30));
                    right: calc(0% - var(--cxl-size-30));
                    z-index: 1;
                    &::after {
                        content: '';
                        width: var(--cxl-size-30);
                        height: 1px;
                        background-color: var(--cxl-color-ff5448);
                        display: block;
                        position: absolute;
                        top: 50%;
                        right: 100%;
                        z-index: 1;
                    }
                }
                &.inside {
                    top: calc(50% + var(--cxl-size-40));
                    left: 0;
                    z-index: 10;
                    &::after {
                        content: '';
                        width: var(--cxl-size-30);
                        height: 1px;
                        background-color: var(--cxl-color-ff5448);
                        display: block;
                        position: absolute;
                        top: 50%;
                        left: 100%;
                        z-index: 1;
                    }
                }
            }
        }
    }
}
.bx-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cxl-color-666666);
    font-size: var(--cxl-size-15);

    span {
        display: block;
        padding: 0 0 var(--cxl-size-12) 0;
        position: relative;
        margin: 0 var(--cxl-size-12);
        &::after {
            content: '';
            width: 1.8rem;
            height: 2px;
            background-color: #fff;
            display: block;
            position: absolute;
            bottom: 0;
            left: calc(50% - 0.9rem);
        }
        &.active {
            color: var(--cxl-color-primary);
            &::after {
                background-color: var(--cxl-color-primary);
            }
        }
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2, 0.9);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1, 1.2);
    }
    100% {
        transform: scale(1);
    }
}
</style>
